import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import NavBar from "@/components/NavBar";
import tw from "twrnc";
import AvatarUploader from "@/components/AvatarUpload";
import { Image } from "expo-image";
import Icon from 'react-native-vector-icons/AntDesign';
import right from '@/assets/images/upload-example/right.png';
import error1 from '@/assets/images/upload-example/error1.png';
import error2 from '@/assets/images/upload-example/error2.png';
import * as SecureStore from 'expo-secure-store';
import { NavigationProp, useNavigation } from "@react-navigation/native";
import { router } from "expo-router";

type RootStackParamList = {
    'mine': { id: string };
    // 其他路由的参数类型
};

export default function AvatarSetting({ route }) {
    const { id } = route.params
    const navigation = useNavigation<NavigationProp<RootStackParamList>>();


    const handleImageSelected = async (imageUri: string) => {
        let userList = JSON.parse(await SecureStore.getItemAsync('userList'));
        let userInfo = userList.find(user => user.id === id);
        userInfo.avatar = imageUri;
        userList = userList.map(user => user.id === id ? userInfo : user);
        await SecureStore.setItemAsync('userList', JSON.stringify(userList));

        // 随机token
        const token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);

        // 登录成功后保存token
        SecureStore.setItemAsync('token', token).then(() => {
            // navigation.navigate('mine', { id: userInfo.id });
            router.push('/(tabs)')
            
        })

    };
    
    useEffect(() => {

    })

    return (
        <View style={tw`flex-1`}>
            <NavBar title="设置头像" rightElement={true} />
            <View style={tw`flex items-center justify-center my-8`}>
                <Text>请上传个人真实照片</Text>
                <AvatarUploader onImageSelected={handleImageSelected} />
            </View>

            <View style={tw`flex-row items-center justify-evenly  absolute bottom-5 left-0 right-0`}>
                <View>
                    <Image source={right} style={tw`w-28 h-28 rounded-md`}></Image>
                    <Icon style={tw`absolute bottom-0 right-1`} name="checksquare" size={20} color="#00D49A" />
                </View>
                <View>
                    <Image source={error1} style={tw`w-28 h-28 rounded-md`}></Image>
                    <Icon style={tw`absolute bottom-0 right-1`} name="closesquare" size={20} color="red" />
                </View>
                <View>
                    <Image source={error2} style={tw`w-28 h-28 rounded-md`}></Image>
                    <Icon style={tw`absolute bottom-0 right-1`} name="closesquare" size={20} color="red" />
                </View>
            </View>
        </View>
    )
}
